<!-- echarts的图表组件 -->
<template>
	<view class="echarts-wrap">
		<mpvue-echarts class="ec-canvas" @onInit="initChart" :canvasId="canvasId" ref="chart" />
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import mpvueEcharts from './mpvue-echarts/src/echarts.vue';

	export default {
		props: {
			echartsOption: {
				required: true,
				type: Object,
				default () {
					return {};
				},
			},
			canvasId: {
				type: String,
				default: 'line'
			}
		},
		components: {
			mpvueEcharts
		},
		methods: {
			initChart(e) {
				let {
					width,
					height
				} = e;
				let canvas = this.$refs.chart.canvas;

				const defaultOption = {
					animation: false,  // 展示动画
					axisPointer: { // 会出现横竖2个方向的指示器
						show: true,
						// type: 'none',
						handle:{
							throttle: 100
						}
					},
					grid: {
						// 网格容器距离上下左右侧的距离
						top: 10,
						right: 5,
						bottom: 30,
						left: 5
					},
					dataZoom: {
						type: 'slider', // 类型固定，K线图中不改
						show: false,
						minValueSpan: 10, // 用于限制窗口大小的最小值（实际数值-1，如：设置为10，则最小显示为十一个坐标值）。
						xAxisIndex: 0,   // 关联的图表
						start: 60,   
						end: 100,
					},
					xAxis: {
						type: 'category', //  类目轴
						data: [], // 要与设个空的，不然x轴的默认配置没法在自定义配置前生效
						axisTick: {
							show: false //  取消坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								color: '#eee'
							}
						},
						boundaryGap: "", // 坐标轴两边留白策略
						axisLabel: {
							margin: 10,
							interval: 1000000,
							showMinLabel: true,
							showMaxLabel: true,
							textStyle: {
								color: '#999',
								fontSize: 12,
							},
						},

					},
					yAxis: {
						scale: true, // 脱离 0 值比例
						axisLine: {
							show: false // 取消显示坐标轴
						},
						axisLabel: {
							inside: true, // 刻度标签朝内。
							margin: 5, // 离左侧的距离
							textStyle: {
								color: '#999',
								fontSize: 10,
							}
						},
						axisTick: {
							show: false // 取消坐标轴刻度线
						},
						splitLine: { // 分隔线
							lineStyle: {
								color: ['#000', 'red'], // 使用深浅的间隔色
								type: 'dotted', // 分隔线线的类型
								opacity: 0.2 // 透明度
							},
						},
					},
					series: [{
						type: 'candlestick',
						name: 'K线',
						data: [],
						itemStyle: {
							normal: {
								color: '#FD1050',
								color0: '#0d8832',
								borderColor: '#FD1050',
								borderColor0: '#0d8832'
							}
						},
					}]
				};
				echarts.setCanvasCreator(() => canvas);
				let chart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				canvas.setChart(chart);
				console.log('echarcts的初始化配置项：', this.echartsOption);
				chart.setOption({}); // 预先设置个空图表
				chart.setOption(defaultOption); // 设置默认配置
				chart.setOption(this.echartsOption); // 自定义配置

				chart.getZr().on('mousemove', params => {
					const pointInPixel = [params.offsetX, params.offsetY];
					if (chart.containPixel('grid', pointInPixel)) {
						// 可以用作原始数据的数组索引
						let xIndex = chart.convertFromPixel({
							seriesIndex: 0
						}, [params.offsetX, params.offsetY])[0];
						// console.log('xIndex', xIndex)
						// console.log(1111111)
					}
				});
				chart.getZr().on('mousedown', params => {
					const pointInPixel = [params.offsetX, params.offsetY];
					if (chart.containPixel('grid', pointInPixel)) {
						// 可以用作原始数据的数组索引
						let xIndex = chart.convertFromPixel({
							seriesIndex: 0
						}, [params.offsetX, params.offsetY])[0];
						// console.log('xIndex', xIndex)
						// console.log(2222)
					}
				});

				// 监听图表数据的移动或缩放
				chart.on('datazoom', function(params) {
					const {
						start,
						end
					} = params;
					if (start < 0) { // 开始请求更多数据 
					}
				});


				// 赋值chart对象到echarts.vue中的this.chart
				this.$refs.chart.setChart(chart);
			}
		}
	}
</script>

<style scoped>
	.echarts-wrap {
		width: 100%;
		height: 300px;
	}
</style>
